<template>
  <VPage>
    <VTable ref="tableRef" v-bind="tableOptins">
      <template #form="{ form }">
        <el-select
          v-model="form.home_system"
          placeholder="所属系统"
          style="width: 200px"
        >
          <el-option
            v-for="item in optionsData?.home_system || []"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-input
          v-model="form.conf_name"
          placeholder="配置名称"
          style="width: 160px"
          clearable
        />
        <el-input
          v-model="form.api_url"
          placeholder="接口地址"
          style="width: 160px"
          clearable
        />
        <el-select
          v-model="form.api_request_type"
          placeholder="接口类型"
          style="width: 200px"
        >
          <el-option
            v-for="item in optionsData?.api_request_type || []"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </template>
      <template #toolbar_btns>
        <el-button icon="Plus" type="primary" @click="visible = true">新增</el-button>
        <el-button @click="showEnum">导出枚举管理</el-button>
      </template>
    </VTable>
    <AddConfig :id="id" v-model="visible" @refresh="refresh" @close="id = ''" />
    <EnumManage ref="EnumManageRef"></EnumManage>
    <Log
      dialog
      v-model="logVisible"
      tag="export"
      :autoLoad="false"
      :business_id="logId"
      @close="logId = ''"
    />
  </VPage>
</template>

<script setup lang="jsx">
import { ElMessage } from "element-plus";
import AddConfig from "./components/AddConfig/index.vue";
import EnumManage from "./components/EnumManage/index.vue";
import { exportConfigList, deleteExportConfig } from "./api/index";
import Log from "@/components/Log/index.vue";
import { copyText } from "@/utils/tools.js";
import { overallOptions } from "@/api/public";
const { proxy } = getCurrentInstance();
const tableRef = ref();
const tableOptins = reactive({
  formConfig: {
    data: {},
  },
  columns: [
    { fixed: "left", type: "checkbox", width: 50 },
    { fixed: "left", title: "ID", field: "id", width: 50 },
    { title: "配置名称", field: "conf_name", minWidth: 150 },
    { title: "所属系统", field: "home_system_desc", width: 100 },
    {
      title: "接口地址",
      field: "api_url",
      minWidth: 200,
      slots: {
        default: ({ row }) => {
          return (
            <div>
              {row.api_urls.map((url, index) => (
                <div key={index}>
                  <span>{url.request_type == 1 ? "GET" : "POST"}</span>
                  <span>&nbsp;&nbsp;&nbsp;&nbsp;</span>
                  <span>{url.api}</span>
                </div>
              ))}
            </div>
          );
        },
      },
    },
    // { title: "接口类型", field: "api_request_type_desc", width: 120 },
    {
      title: "导出枚举",
      field: "tag_name",
      minWidth: 200,
      slots: {
        default: ({ row }) => {
          return (
            <div class="flex items-center">
              <i
                class="align-middle cursor-pointer hover:text-[#64a4ff] mr-[4px]"
                onClick={() => copyText(row.tag_name)}
              >
                <svg-icon icon-class="copy" class="text-[16px]"></svg-icon>
              </i>
              <span>{row.tag_name}</span>
            </div>
          );
        },
      },
    },
    { title: "最大导出数量", field: "export_maximum", width: 130 },
    { title: "创建人", field: "creator", width: 170 },
    { title: "创建时间", field: "create_time", width: 160 },
    {
      title: "操作",
      field: "a9",
      fixed: "right",
      width: 180,
      slots: {
        default: ({ row }) => {
          return [
            <div>
              <el-button link type="primary" onClick={() => handleEdit(row.id)}>
                编辑
              </el-button>
              <el-button
                link
                type="danger"
                onClick={() => handleDelete(row.id)}
              >
                删除
              </el-button>
              <el-button link type="primary" onClick={() => handleLog(row.id)}>
                日志
              </el-button>
            </div>,
          ];
        },
      },
    },
  ],
  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    props: {
      result: "data",
      total: "total",
    },
    ajax: {
      query: ({ page, form }) => {
        return exportConfigList({ ...page, ...form }).then((res) => {
          return {
            data: res.data,
            total: res.total,
          };
        });
      },
    },
  },
});
const optionsData = ref({});
const getOpt = async () => {
  const { data } = await overallOptions({
    params: ["home_system", "api_request_type"],
  });
  optionsData.value = data || {};
};
getOpt();
const visible = ref(false);
const listRef = ref();
const params = ref({});
const id = ref("");
const refresh = () => {
  tableRef?.value.$table.commitProxy("query");
};
const logId = ref("");
const logVisible = ref(false);
const handleLog = (id) => {
  logId.value = id;
  logVisible.value = true;
};
const handleEdit = (e) => {
  id.value = e;
  visible.value = true;
};

const handleDelete = (id) => {
    proxy?.confirm({
    title: "提示",
    content: (
      <p>
        确认删除
        <span class="text-[#3366F1] px-[4px]">{1}</span>
        条数据？
      </p>
    ),
    beforeClose: async (action, instance, done) => {
      if (action === "confirm") {
        try {
          instance.confirmButtonLoading = true;
          instance.confirmButtonText = "处理中..";
          const { code, message } = await deleteExportConfig({ id });
          if (code !== 200) return ElMessage.success(message);
          ElMessage.success("删除成功!");
        } catch (e) {
          console.error(e);
        } finally {
          instance.confirmButtonLoading = false;
          done();
          refresh();
        }
      } else {
        done();
      }
    },
  });
};

const EnumManageRef = ref();
const showEnum = async () => {
  EnumManageRef.value.open();
};
</script>
